<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-toolbar che-title="All factories" border-none></che-toolbar>
<che-description che-link-title="Learn more." che-link="{{branding.docs.factory}}">
  Factories enable workspace automation and are packaged as a consumer-friendly URL. Create new Factories to onboard your team, or integrate
  with your toolchain.
</che-description>
<md-content md-scroll-y flex layout="column" md-theme="maincontent-theme" class="factories-list-factories">
  <div class="progress-line">
    <md-progress-linear ng-show="listFactoriesCtrl.isLoading" md-mode="indeterminate"></md-progress-linear>
  </div>
  <md-content flex class="md-maincontent-theme-theme">
    <che-list-header che-input-placeholder="Search"
                     id="seach-factory-input"
                     che-search-model="listFactoriesCtrl.factoriesFilter.name"
                     che-on-search-change="listFactoriesCtrl.onSearchChanged(str)"
                     che-hide-search="listFactoriesCtrl.factories.length === 0"
                     che-add-button-title="Create Factory"
                     che-add-button-href="#/factories/create-factory"
                     che-delete-button-title="Delete"
                     che-on-delete="listFactoriesCtrl.deleteSelectedFactories()"
                     che-hide-delete="listFactoriesCtrl.cheListHelper.isNoItemSelected"
                     che-hide-header="listFactoriesCtrl.cheListHelper.visibleItemsNumber === 0">
      <div flex="100"
           layout="row"
           layout-align="start stretch"
           class="che-list-item-row">
        <div layout="column" layout-gt-xs="row"
             layout-align="start center"
             class="che-checkbox-area">
          <div layout="row" layout-align="center center" class="che-list-item-checkbox-main">
            <md-checkbox class="che-list-item-checkbox"
                         aria-label="Factory list"
                         ng-checked="listFactoriesCtrl.cheListHelper.areAllItemsSelected"
                         ng-click="listFactoriesCtrl.cheListHelper.changeBulkSelection()"></md-checkbox>
          </div>
        </div>
        <div flex hide-xs layout-gt-xs="row"
             layout-align="start center"
             class="che-list-item-details">
          <che-list-header-column flex-gt-xs="25"
                                  che-sort-value='listFactoriesCtrl.factoriesOrderBy'
                                  che-sort-item='[name, id]'
                                  che-column-title='Factory'></che-list-header-column>
          <che-list-header-column flex-gt-xs="60"
                                  che-sort-value='listFactoriesCtrl.factoriesOrderBy'
                                  che-sort-item='workspace.environments[0].machines[0].limits.ram'
                                  che-column-title='RAM'></che-list-header-column>
          <che-list-header-column flex-gt-xs="15"
                                  che-column-title='Actions'></che-list-header-column>
        </div>
      </div>
    </che-list-header>
    <che-list ng-show="listFactoriesCtrl.cheListHelper.visibleItemsNumber > 0">
      <cdvy-factory-item
              ng-repeat="factory in listFactoriesCtrl.cheListHelper.getVisibleItems() | orderBy:listFactoriesCtrl.factoriesOrderBy"
              cdvy-factory="factory"
              cdvy-is-selectable="true"
              ng-model="listFactoriesCtrl.cheListHelper.itemsSelectionStatus[factory.id]"
              cdvy-on-checkbox-click="listFactoriesCtrl.cheListHelper.updateBulkSelectionStatus()"></cdvy-factory-item>
    </che-list>
    <div class="paging-buttons-area" ng-if="listFactoriesCtrl.isPagination()">
      <md-button
              ng-disabled="!listFactoriesCtrl.hasPreviousPage()"
              ng-click="listFactoriesCtrl.fetchFactoriesPage('first');">
        <span><<</span>
      </md-button>
      <md-button
              ng-disabled="!listFactoriesCtrl.hasPreviousPage()"
              ng-click="listFactoriesCtrl.fetchFactoriesPage('prev');">
        <span><</span>
      </md-button>
      <md-button disabled>
        <span>{{listFactoriesCtrl.pagesInfo.currentPageNumber}}</span>
      </md-button>
      <md-button
              ng-disabled="!listFactoriesCtrl.hasNextPage()"
              ng-click="listFactoriesCtrl.fetchFactoriesPage('next');">
        <span>></span>
      </md-button>
      <md-button
              ng-disabled="!listFactoriesCtrl.hasLastPage()"
              ng-click="listFactoriesCtrl.fetchFactoriesPage('last');">
        <span>>></span>
      </md-button>
    </div>
    <div class="che-list-empty">
        <span ng-show="listFactoriesCtrl.factories.length > 0 && listFactoriesCtrl.visibleItemsNumber === 0">
          No factories found.
        </span>
      <span ng-show="listFactoriesCtrl.factories.length === 0">There are no factories.</span>
    </div>
  </md-content>
</md-content>
